<template>
    <div style="width: 1000px;">
        <div style="width: 700px; margin-bottom:60px;float: left">

            <div style="margin-top: 10px">
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="a in advertising" :key="a.id" @click="toDeail(a.bookId)"  >
                            <img style="width: 100%;height: 100%;" :src=a.cover>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div>
                <div style="text-align: center;margin: 15px 0 10px 5px">
                    推荐
                </div>
                <h4 style=""></h4>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="flex: none" v-for="rb in recommendBookList" :key="rb.id">
                        <router-link :to="{name:'bookInformation', params: {id:rb.id}}" target="_blank" >
                            <div style="width: 130px;height: 180px;padding: 5px">
                                <img style="width: 100%;height: 100%;border-radius: 4%" :src="rb.cover">
                            </div>
                            <div style="width:130px;text-align: center;padding: 5px 0 20px 0; font-size: 12px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;">
                                {{rb.name}}
                            </div>
                        </router-link>
                    </div>

                </div>
            </div>
            <div>
                <div style="text-align: center;margin: 15px 0 10px 5px">
                    热血
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="flex: none" v-for="rab in righteousArdourList" :key="rab.id">
                        <router-link :to="{name:'bookInformation', params: {id:rab.id}}" target="_blank" >
                            <div style="width: 130px;height: 180px;padding: 5px">
                                <img style="width: 100%;height: 100%;border-radius: 4%" :src="rab.cover">
                            </div>
                            <div style="width:130px;text-align: center;padding: 5px 0 20px 0;width:130px;font-size: 12px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;">
                                {{rab.name}}
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
            <div>
                <div style="text-align: center;margin: 15px 0 10px 5px">
                    玄幻
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="flex: none" v-for="b in fantasyList" :key="b.id">
                        <router-link :to="{name:'bookInformation', params: {id:b.id}}" target="_blank" >
                            <div style="width: 130px;height: 180px;padding: 5px">
                                <img style="width: 100%;height: 100%;border-radius: 4%" :src="b.cover">
                            </div>
                            <div style="width:130px;text-align: center;padding: 5px 0 20px 0;width:130px;font-size: 12px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;">
                                {{b.name}}
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
            <div>
                <div style="text-align: center;margin: 15px 0 10px 5px">
                    男生
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="flex: none" v-for="b in boyList" :key="b.id">
                        <router-link :to="{name:'bookInformation', params: {id:b.id}}" target="_blank" >
                            <div style="width: 130px;height: 180px;padding: 5px">
                                <img style="width: 100%;height: 100%;border-radius: 4%" :src="b.cover">
                            </div>
                            <div style="width:130px;text-align: center;padding: 5px 0 20px 0;width:130px;font-size: 12px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;">
                                {{b.name}}
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
            <div>
                <div style="text-align: center;margin: 15px 0 10px 5px">
                    女生
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="flex: none" v-for="b in girlList" :key="b.id">
                        <router-link :to="{name:'bookInformation', params: {id:b.id}}" target="_blank" >
                            <div style="width: 130px;height: 180px;padding: 5px">
                                <img style="width: 100%;height: 100%;border-radius: 4%" :src="b.cover">
                            </div>
                            <div style="width:130px;text-align: center;padding: 5px 0 20px 0;width:130px;font-size: 12px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;">
                                {{b.name}}
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>

            <el-backtop>
                👆
            </el-backtop>

        </div>

        <div style="width: 300px;height:500px; float: left;">
            <div style="padding: 30px">
                <h4 style="text-align: center">猜你喜欢</h4>
                <div  v-for="b in rankList" :key="b.id" style="width:240px;font-size: 12px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;padding:5px 0">
                    <router-link :to="{name:'bookInformation', params: {id:b.id}}" target="_blank" >
                        {{b.name}}
                    </router-link>
                </div>

            </div>

        </div>
    </div>
</template>

<script>

    import request from "../utils/request";

    export default {
        name: 'index',
        data() {
            return {
                advertising: {},
                recommendBookList:{},
                righteousArdourList:{},
                fantasyList:{},
                boyList:{},
                girlList:{},
                rankList:{},
            }
        },
        created() {
            this.getAllAdvertising()

            this.getBook()
        },
        methods: {
            getAllAdvertising() {
                request.get("advertising/getAllAdvertising").then(res => {
                  console.log(res)
                    this.advertising = res.data
                })
            },
            getBook() {
                request.get("book/getBook").then(res => {
                    console.log(res)
                    this.recommendBookList = res.data.recommendBookList
                    this.righteousArdourList = res.data.righteousArdourList
                    this.fantasyList = res.data.fantasyList
                    this.boyList = res.data.boyList
                    this.girlList = res.data.girlList
                    this.rankList = res.data.rankList
                })
            },
          toDeail (id) {
            console.log("id:"+id)
            this.$router.push({path: "/bookInformation"+id, params: {id: id}})
          }

        }
    }
</script>
<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
</style>